<template>
    <div class="main">
        <topHeader :title="`智能自动化车间 — 看板`"></topHeader>
        <div class="d-flex flex-row justify-content-center">
            <div class="d-flex flex-column">
                <div v-for="(item, index) in routesList" :key="index" class="d-flex flex-column routeTab ">
                    <!-- <a :href="item.href">{{ item.routeName }}</a> -->
                    <router-link :to="item.path">{{ item.routeName }}</router-link>
                </div>
            </div>
        </div>
        <bottomFooter></bottomFooter>
    </div>
</template>

<script setup lang="ts">
import topHeader from '@/components/topHeader/index.vue'
import bottomFooter from '@/components/bottomFooter/index.vue';
const routesList = ref([{
    path:'/synthesis/index',
    routeName: '综合看板'
}, {
    path:'/workShop/index',
    routeName: '车间看板'
},{
    path:'/agv/index',
    routeName: 'AGV看板'
},{
    path:'/machineOee/index',
    routeName: '稼动率看板'
}, {
    path:'/workOrder/index',
    routeName: '工单看板'
},{
    path:'/machineView/index',
    routeName: '机器查看'
}])

</script>

<style lang="scss">
.routeTab {
    padding: 2vh;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.routeTab a {
    color: #fff;
    font-size: 1.8rem;
    text-decoration: underline;
}

.routeTab a:hover {
    color: rgb(65, 135, 240);
}
</style>